<template>
  <div class="search_result" slot="body">
    <Header></Header>

    <el-tabs v-model="search_type" class="box-card" >
      <el-tab-pane label="职位" name="first">
        <el-card v-for="i in job_list" :key="i.id" style="margin-top: 10px;width: 950px">
          <el-row>
            <div @click="job_detail(i.id)" style="cursor: pointer">
              <el-col :span="8">
                <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;">
                  <span>{{i.title}}</span>
                </el-row>
                <el-row style="margin-top: 20px;color: #909399">
                  <span>{{i.education}}/{{i.experience}}</span>
                  <span style="float: right;font-size: 13px;color: #909399;">[{{i.createTime}}发布]</span>
                </el-row>
              </el-col>

              <el-col :span="4" style="margin-left: 5px;color: #F56C6C;font-size:20px">
                <span>{{i.money}}</span>
              </el-col>
            </div>

            <div @click="company_detail(i)" style="cursor: pointer">
              <el-col :span="8">
                <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">
                  <span>{{i.company}}</span>
                </el-row>
                <el-row style="margin-top: 20px;color: #909399">
                  <span>{{i.addr}}/{{i.type}}</span>
                </el-row>
              </el-col>

              <el-col span="3">
                <img :src="i.picture" alt="" style="width: 80px;height: 80px;float: right">
              </el-col>
            </div>

          </el-row>
        </el-card>

      </el-tab-pane>

      <el-tab-pane label="公司" name="second">

        <el-card id="hot_company" style="margin-top: 10px;width: 950px;">
          <el-row :gutter="12" s>
            <el-col :span="8" v-for="i in company_list" :key="i.id" class="text-card">
              <!--          {{i}}-->
              <el-card @click.native="company_detail(i.id)" style="cursor: pointer">
                <el-row>
                  <el-col :span="10">
                    <img src="" alt="" style="width: 100px;height: 100px">
                  </el-col>
                  <el-col :span="14">
                    <el-row style="margin-bottom: 10px"><span style="font-size: 18px;color: #409EFF;">哇啦招聘有限公司</span>
                    </el-row>
                    <el-row><span style="color: #909399">A轮融资|500人以上|互联网</span></el-row>
                    <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-top: 5px">
                      是一家创新创业型公司。
                    </el-row>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card style="width: 270px;position: absolute;top: 165px;right: 150px">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>推荐职位</span>
      </div>
      <div v-for="(i,index) in recommend_list" :key="index" v-if="index<2">
        <div @click="job_detail(i)" style="cursor: pointer">
          <el-row style="margin: 5px 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;">{{i.title}}</el-row>
          <el-row style="color: #F56C6C;">{{i.money}}</el-row>
        </div>
        <el-row @click.native="company_detail(i)" style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">{{i.company}}</el-row>
        <el-divider></el-divider>
      </div>
    </el-card>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'SearchResult',
    components: {Header, Footer},
    created () {
      this.$axios.post('http://localhost:8081/job/selectByJob', {
        'tag': 1,
      }).then((res) => {
        const result = res.data
        this.recommend_list = result.data.reverse()
      })
      this.$axios.post('http://localhost:8081/job/selectByJob', {
        'status': 1,
        'title': this.$route.query.keyWord
      }).then((res) => {
        const result = res.data
        this.job_list = result.data
      })
      this.$axios.post('http://localhost:8081/company/selectByCompany', {
        'status': 1,
        'companyName': this.$route.query.keyWord
      }).then((res) => {
        const result = res.data
        this.company_list = result.data
      })
    },
    data () {
      return {
        search_type: 'first',
        company_list: [],
        recommend_list: [],
        job_list: [
          {
            'title': 'Java开发工程师',
            'education': '专科以上',
            'experience': '经验不限',
            'create_time': '2022-01-20 17:39',
            'money': ' 6-9K',
            'company': '联奕科技',
            'scale': '500-999人',
            'type': '已上市',
            'picture': 'https://img.bosszhipin.com/beijin/mcs/bar/20191217/6b9d3f1fd09c23e037cc61b44479fceebe1bd4a3bd2a63f070bdbdada9aad826.jpg?x-oss-process=image/resize,w_100,limit_0'
          },
          {
            'title': '【应届生】Java服务端开发工程师 ',
            'education': '不限',
            'experience': '经验不限',
            'create_time': '2022-01-20 17:39',
            'money': '5-8K·13薪',
            'company': '漫灵游戏',
            'scale': '100-299人',
            'type': 'A轮',
            'picture': 'https://img.bosszhipin.com/beijin/mcs/chatphoto/20171012/faaeea5e627fd42888755ab3fbab0074cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0'
          },
          {
            'title': '后端工程师-飞书人力套件',
            'education': '本科',
            'experience': '经验不限',
            'create_time': '2022-01-20 17:39',
            'money': '15-25K·15薪',
            'company': '北京字节跳动',
            'scale': '1000人以上',
            'type': 'D轮及以上',
            'picture': 'https://img.bosszhipin.com/beijin/mcs/chatphoto/20201123/424d60a634b16f6d498bb81a1ecc4fb882e5997348729a6cfe816ad90c892e55_s.jpg?x-oss-process=image/resize,w_100,limit_0'
          },
        ],
      }
    },
    methods: {
      job_detail(id) {
        this.$router.push({path: 'job_detail', query: {id: id}})
      },
      company_detail (id) {
        this.$router.push({path: 'company_detail', query: {id: id}})
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .text-card {
    font-size: 15px;
    padding: 10px 0px;
  }
</style>
